<template>
  <div class="basicInfo">
    <my-bread-crumb>
      <el-breadcrumb-item>信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户信息</el-breadcrumb-item>
    </my-bread-crumb>
    <el-card class="box-card">
    <!-- 查询的表单 -->
      <el-form ref="dataFormRef" :model="data" label-width="80px" :inline="true" >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="data.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="data.gender" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院" prop="department">
          <el-input v-model="data.department"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="classname">
          <el-input v-model="data.classname"></el-input>
        </el-form-item>
        <el-form-item label="校区" prop="schoolLocation">
          <el-select v-model="data.schoolLocation" placeholder="请选择">
            <el-option label="松山湖校区" value="松山湖校区"></el-option>
            <el-option label="莞城校区" value="莞城校区"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-button-item">
          <el-button type="primary" @click="submitForm">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
        <el-form-item class="export-button">
          <el-button type="primary" @click="exportExcel">导出excel文件</el-button>
        </el-form-item>
      </el-form>
      <!--table内容  -->
      <el-table
        :data="result.records"
        stripe
        @sort-change="dateSortChange">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="username" label="学号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="certificateType" label="证件类型"></el-table-column>
        <el-table-column prop="idNumber" label="证件号码"></el-table-column>
        <el-table-column prop="address" label="家庭住址"></el-table-column>
        <el-table-column prop="phoneNumber" label="电话号码"></el-table-column>
        <el-table-column prop="contacts" label="紧急联系人"></el-table-column>
        <el-table-column prop="contactNumber" label="紧急联系人号码"></el-table-column>
        <el-table-column prop="identityCategory" label="身份类别"></el-table-column>
        <el-table-column prop="schoolLocation" label="所在校区"></el-table-column>
        <el-table-column prop="department" label="学院"  width="200px"></el-table-column>
        <el-table-column prop="classname" label="班级"  width="200px"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"
                         :formatter="dateFormatter" width="180px" sortable="custom"></el-table-column>
      </el-table>
      <!-- 分页条   -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.current"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="data.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="result.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getUserInfoListExcel, getUserInfoList} from '@/network/admin'
import {formatDate} from "@/common/utils"
import MyBreadCrumb from "@/components/MyBreadCrumb";
export default {
  name: "BasicInfo",
  components: {MyBreadCrumb},
  data(){
    return{
      data:{
        current:1,  //页码
        size:10,   //页面大小
        name:'',   //姓名
        gender:'',  //性别
        department:'',  //学院
        classname:'',   //班级
        schoolLocation:''  //校区
      },
      result:{
        total:0,
        pages:1,
        records:[]
      }
    }
  },
  created(){
    this.getUserInfos();
  },
  methods:{
    exportExcel(){
      getUserInfoListExcel(this.data).then(res=>{
        console.log(res);
        let downloadFile=document.createElement('a');
        let blob=new Blob([res.data], {type:"application/vnd.ms-excel;charset=UTF-8"});
        downloadFile.href=window.URL.createObjectURL(blob);
        downloadFile.download=
          decodeURI(res.headers['content-disposition'].split('filename=')[1]);
        downloadFile.click();
        window.URL.revokeObjectURL(downloadFile.href);
      })
    },
    async getUserInfos(){
      const {data:res,code} = await getUserInfoList(this.data);
      if(code===200){
        this.result.records=res.records;
        this.result.total=res.total;
        this.result.pages=res.pages;
      }
      else{
        this.$message.error({message:"获取用户列表失败！", duration:1000});
      }
    },
    handleSizeChange(newSize){
      this.data.size=newSize;
      this.data.current=1;
      this.getUserInfos();
    },
    handleCurrentChange(newCurrent){
      this.data.current=newCurrent;
      this.getUserInfos();
    },
    //清空表单
    resetForm(){
      this.$refs.dataFormRef.resetFields()
      this.data.current=1;
      this.getUserInfos();
    },
    //提交表单
    submitForm(){
      this.data.current=1;
      this.getUserInfos();
    },
    //时间格式化
    dateFormatter(row,column){
      return formatDate(new Date(Date.parse(row.createTime)),"yyyy-MM-dd hh:mm:ss");
    },
    //日期排序
    dateSortChange(column){
      if(column.order){
        if(column.order==="descending"){
          this.data.order="desc";
        }
        if(column.order==="ascending"){
          this.data.order="asc";
        }
      }
      else this.data.order="";
      this.current=1;
      this.getUserInfos();
    }
  }
}
</script>

<style scoped>
  .form-button-item{
    margin-left:38px;
  }
 .el-form{
   border-bottom: 1px solid #EBEBEB;
 }
 .export-button{
   float:right;
 }
</style>
